<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.small_img {
				position: relative;
				width: 400px;
				height: 400px;
			}

			.small_img>img {
				width: 100%;
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 200px;
				height: 200px;
				background-color: rgba(0, 0, 0, .4);
				transform: translate(-50%,-50%);
				display: none;
			}

			.big_img {
				position: absolute;
				top: 0;
				right: 0;
				width: 600px;
				height: 600px;
				transform: translateX(100%);
				display: none;
			}

			.big_img>img {
				width: 100%;
			}

			.small_img:hover .mask,
			.small_img:hover .big_img {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="small_img">
			<img src="img/user.jpg" alt="">
			<div class="mask"></div>
			<div class="big_img">
				<img src="img/user.jpg" alt="">
			</div>
		</div>
		<script type="text/javascript">
			var small_img = document.querySelector(".small_img"),
				mask = document.querySelector(".mask"),
				big_img = document.querySelector(".big_img");

			small_img.addEventListener("mousemove", function(e) {
				var x = e.pageX,
					y = e.pageY;
				x = x < mask.clientWidth / 2 ? mask.clientWidth / 2 : x;
				y = y < mask.clientWidth / 2 ? mask.clientWidth / 2 : y;
				x = x > big_img.clientWidth ? big_img.clientWidth - mask.clientWidth : x;
				
				
				console.log()
				mask.style.left = x + "px";
				mask.style.top = y + "px";
			})
		</script>
	</body>
</html>
